<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index/vuex' }">Vuex 学习</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="margintop20">
            <el-col>
                <h1> count == {{count2}}--{{count3}} -- {{count}} -- {{ newCount }} </h1>
                <h2>word == {{word}}</h2>
            </el-col>

            <el-col>
                <el-button type="success" @click="changeCount">change count </el-button>
                <el-button type="success" @click="changeCountByNum(20)">add count 20 </el-button>

                <el-button type="danger" @click="changeWord('Are you OK')">word = Are you OK </el-button>
                <p> 
                    <span> {{msg}}  </span>
                    <el-input :value="msg" @input="changesome" ></el-input>
                    <el-input v-model="msgone"></el-input>
                </p>
                <h2> city === {{city}}</h2>
                <h3 @click="changeCityName('befutiful WUHANNNN')">cityname == {{name}}</h3>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import store from "@/store"  // store == this.$store
import {mapState,mapMutations,mapGetters,mapActions} from "vuex"
export default {
    data(){
        return {
        }
    },
    computed:{
        ...mapState(['city']), 
        ...mapState("city",['text','name']),   // 命名空间
        msgone:{
            get(){
                return this.$store.state.msg;
            },
            set(val){
                this.$store.dispatch("changeMsgAction",val);  // dispatch 发送 
            }
        },
        ...mapGetters(['newCount']),
        count2(){
            return this.$store.state.count
        },
        ...mapState({
            count3:'count',    // 传字符串参数 'count' 等同于 `state => state.count`
            // count: state => state.count,
        }),
        ...mapState(['count','word','msg'])    // 名称与 state 的子节点名称相同  // 映射 this.count 为 store.state.count
    },
    methods:{
        ...mapMutations('city',['changeCityName']),
        changesome(val){
            // console.log(e);
            this.changeMsgAction(val)
        },
        ...mapActions(['changeMsgAction']),  // this.changeMsgAction  
        ...mapMutations(['changeCount','changeCountByNum','changeWord']),  // this.changeCount ==  this.$store.commit("changeCount",10) 
        change(){
            this.$store.commit("changeCount",10)  // 修改状态的唯一方式就是 提交mutation 
        }
    },
    mounted(){
        console.log(this.$store)
    }
}
</script>